<template>
  <!-- 背景色为 f2f2f2的容器-->
  <div style="background:#f2f2f2;">
    <!-- title && goback -->
    <div
      style="display:flex;justify-content:space-between;align-items:center;padding:0 15px;background:#fff;height:50px;margin-bottom:5px;"
    >
      <div>
        <span class="shutiao">
          <!-- 竖条 -->
        </span>
        <span style="font-size:13px;">筛查详情</span>
      </div>
      <div>
        <el-button type="primary">
          <span>
            <svg-icon class-name="back" icon-class="fanhui" />返回
          </span>
        </el-button>
      </div>
    </div>
    <!-- 导航+锚点位置 -->
    <div>
      <!-- 导航 -->
      <div style="background:#fff;border-bottom:1px solid #f2f2f2">
        <ul class="filter-nav">
          <li
            v-for="(item, index) in filterNavItem"
            :key="index"
            class="filter-nav-item"
            :class="{ activeNav: index == filterNavItemActive }"
            :data-target="item.target"
            @click="returnIdAddress('#' + item.target, index)"
          >{{ item.name }}</li>
        </ul>
      </div>
      <!-- 带滚动条的表单 -->
      <div style="height:858px;overflow:auto;">
        <el-form
          :inline="true"
          label-position="left"
          label-width="68px"
          :model="formInline"
          class="demo-form-inline"
          size="mini"
          style="background:#fff;"
        >
          <el-row
            id="basic"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">基本信息</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="20">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4">
                  <el-form-item label="姓名">
                    <el-input style="width:120px" v-model="formInline.name" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="性别">
                    <el-radio-group style="width:120px" v-model="formInline.sex">
                      <el-radio label="男" />
                      <el-radio label="女" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="年龄">
                    <el-input style="width:120px" v-model="formInline.age" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="身高">
                    <el-input style="width:120px" v-model="formInline.height" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="体重">
                    <el-input style="width:120px" v-model="formInline.weight" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="BMI">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" style="padding:0 10px">
                <el-col :span="4">
                  <el-form-item label="身份证">
                    <el-input style="width:120px" v-model="formInline.idcardid" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="出生日期">
                    <el-input style="width:120px" v-model="formInline.birthday" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="国籍">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="民族">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="医保类型">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="医保号">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" style="padding:0 10px">
                <el-col :span="4">
                  <el-form-item label="婚姻状况">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="职业类型">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="文化程度">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="联系方式">
                    <el-input style="width:120px" v-model="formInline.contactphone" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="家属联系">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="家属关系">
                    <el-radio-group v-model="resource">
                      <el-radio style="margin-right:21px;" label="好友" />
                      <el-radio label="亲戚" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <div class="identity_box">
                <!-- 身份证 -->
              </div>
            </el-col>
          </el-row>
          <el-row
            id="BP"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">血压/BP</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5">
                  <el-form-item label="收缩压">
                    <el-input style="width:120px" />
                    <span>mmHg</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="舒张压">
                    <el-input style="width:120px" />
                    <span>mmHg</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="Glu"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">血糖/Glu</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4">
                  <el-form-item label="血糖类型">
                    <el-input style="width:120px" v-model="formInline.bst" />
                    <!-- <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>-->
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="血糖">
                    <el-input style="width:120px" v-model="formInline.bs" />
                    <span>mmol/L</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="TC"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">血脂/TC</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5">
                  <el-form-item label="总胆固醇">
                    <el-input style="width:120px" v-model="formInline.tcu" />
                    <span>mmHg</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="甘油三酯">
                    <el-input style="width:120px" v-model="formInline.trig" />
                    <span>mmol/L</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="高密度脂蛋白" class="six_word">
                    <el-input style="width:120px" />
                    <span>mmol/L</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="低密度脂蛋白" class="six_word">
                    <el-input style="width:120px" />
                    <span>mmol/L</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="UA"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">血尿酸/UA</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5">
                  <el-form-item label="血尿酸">
                    <el-input style="width:120px" />
                    <span>umol/L</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="SpO2"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">血氧/SpO2</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4">
                  <el-form-item label="血氧">
                    <el-input style="width:120px" v-model="formInline.bloodoxygen" />
                    <span>%</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="HbA1c"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">糖化血红蛋白/HbA1c</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5">
                  <el-form-item class="six_word" label="糖化血红蛋白">
                    <el-input style="width:120px" v-model="formInline.hbAlc" />
                    <span>%</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="Hcy"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">同型半胱氨酸/Hcy</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4">
                  <el-form-item label="收缩压">
                    <el-input style="width:120px" />
                    <span>%</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="ECG"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">心电图/ECG</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5">
                  <el-form-item label="呼吸">
                    <el-input style="width:120px" />
                    <span>次/分钟</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="心率">
                    <el-input style="width:120px" />
                    <span>次/分钟</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="脉搏">
                    <el-input style="width:120px" />
                    <span>次/分钟</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4">
                  <!-- 心电图照片 -->
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="questionnaireCategory"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">问卷类别</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4">
                  <span>血脂异常风险评估表</span>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="填写时间">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <span>本问卷根据《中国成人血脂异常防治指南》对您的血脂水平及10年内ASCVD（动脉粥样硬化性心血管病）发病风险进行评估。点击查看评估标准</span>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4" offset="4">
                  <el-form-item label="性别">
                    <el-radio-group style="width:120px">
                      <el-radio label="男" />
                      <el-radio label="女" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="年龄">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="身高">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="体重">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="BMI">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5" offset="4">
                  <el-form-item label="总胆固醇">
                    <el-input style="width:120px" />
                    <span>mmol/L</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="甘油三酯">
                    <el-input style="width:120px" />
                    <span>mmol/L</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="高密度脂蛋白" class="six_word">
                    <el-input style="width:120px" />
                    <span>mmol/L</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="低密度脂蛋白" class="six_word">
                    <el-input style="width:120px" />
                    <span>mmol/L</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5" offset="4">
                  <el-form-item label="收缩压">
                    <el-input style="width:120px" />
                    <span>mmHg</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="舒张压">
                    <el-input style="width:120px" />
                    <span>mmHg</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5" offset="4">
                  <el-form-item label="您是否患有高血压" class="longText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否患有糖尿病" class="longText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是ASCVD患者吗" class="longText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否吸烟" class="six_word">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="hengfenge" />
              <el-row
                type="flex"
                align="center"
                style="padding:0 10px;margin-bottom:18px;"
                :gutter="20"
              >
                <el-col :span="4" style="text-align:right;">
                  <span style="margin-right:100px;">评估结果</span>
                </el-col>
                <el-col :span="4">
                  <span style="font-size: 14px;color: #606266;font-weight:700">您的血脂水平为</span>
                </el-col>
                <el-col :span="2">
                  <span>异常</span>
                </el-col>
                <el-col :span="10">
                  <el-input
                    v-model="textarea2"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                  />
                </el-col>
              </el-row>
              <el-row
                type="flex"
                align="center"
                style="padding:0 10px;margin-bottom:18px"
                :gutter="20"
              >
                <el-col :span="4" offset="4">
                  <span style="font-size: 14px;color: #606266;font-weight:700">您10年内ASCVD发病危险为</span>
                </el-col>
                <el-col :span="2">
                  <span>异常</span>
                </el-col>
                <el-col :span="10">
                  <el-input
                    v-model="textarea2"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                  />
                </el-col>
              </el-row>
              <el-row
                type="flex"
                align="center"
                style="padding:0 10px;margin-bottom:18px"
                :gutter="20"
              >
                <el-col :span="4" offset="4">
                  <span style="font-size: 14px;color: #606266;font-weight:700">您的心血管余生患病危险为</span>
                </el-col>
                <el-col :span="2">
                  <span>异常</span>
                </el-col>
                <el-col :span="10">
                  <el-input
                    v-model="textarea2"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                  />
                </el-col>
              </el-row>
              <div class="hengfenge2" />
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4">
                  <span>高血压-心血管发病风险评估</span>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="填写时间">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <span>本问卷根据《中国成人血脂异常防治指南》对您的血脂水平及10年内ASCVD（动脉粥样硬化性心血管病）发病风险进行评估。点击查看评估标准</span>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="4" offset="4">
                  <el-form-item label="性别">
                    <el-radio-group style="width:120px">
                      <el-radio label="男" />
                      <el-radio label="女" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="年龄">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="收缩压">
                    <el-input style="width:120px" />
                    <span>mmHg</span>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="舒张压">
                    <el-input style="width:120px" />
                    <span>mmHg</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5" offset="4">
                  <el-form-item label="您是否具有腹型肥胖" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否吸烟或经常被动吸烟" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否伴发脑血管病" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否患有高血压" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5" offset="4">
                  <el-form-item label="您的血脂是否正常" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否有早发心血管病家族史" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否伴发心脏疾病" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否伴发外周血管疾病" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5" offset="4">
                  <el-form-item label="您是否糖耐量受损" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否患有高同型半胱氨酸血症" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否伴发肾脏疾病" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否伴发视网膜病变" class="biglongText">
                    <el-radio-group style="width:120px">
                      <el-radio label="是" />
                      <el-radio label="否" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" align="center" style="padding:0 10px" :gutter="20">
                <el-col :span="5" offset="4">
                  <el-form-item label="您是否具有靶器官损害" class="biglongText">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否具有慢性肾脏疾病CKD" class="biglongText">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="您是否具有糖尿病" class="biglongText">
                    <el-select placeholder="活动区域" style="width:120px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="hengfenge" />
              <el-row
                type="flex"
                align="center"
                style="padding:0 10px;margin-bottom:18px;"
                :gutter="20"
              >
                <el-col :span="4" style="text-align:right;">
                  <span style="margin-right:100px;">评估结果</span>
                </el-col>
                <el-col :span="4">
                  <span style="font-size: 14px;color: #606266;font-weight:700">您未来患心血管疾病的风险</span>
                </el-col>
                <el-col :span="2">
                  <span>异常</span>
                </el-col>
                <el-col :span="10">
                  <el-input
                    v-model="textarea2"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                  />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row
            id="dangerousLv"
            style="height:60px;border-bottom:1px solid #f2f2f2;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" style="display:flex; padding-left:15px;">
              <div class="title_box">
                <span class="shutiao">
                  <!-- 竖条 -->
                </span>
                <span class="title">危险等级</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;padding-left:16px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24">
              <el-row
                type="flex"
                align="center"
                style="padding:0 10px;align-items: center;"
                :gutter="20"
              >
                <el-col :span="3">
                  <el-form-item label="填写时间">
                    <el-input style="width:100px" />
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="危险等级">
                    <el-select placeholder="活动区域" style="width:100px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="随访周期">
                    <el-select placeholder="活动区域" style="width:100px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="下次随访时间" class="six_word">
                    <el-input style="width:120px" />
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="随访状态">
                    <el-select placeholder="活动区域" style="width:100px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="类型">
                    <el-select placeholder="活动区域" style="width:100px;">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary">查看详情</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 空白区域 -->
          <!-- <el-row
            style="border-bottom:1px solid #f2f2f2;padding-top:18px;height:750px;"
            type="flex"
            class="row-bg"
          >
            <el-col :span="24" />
          </el-row>-->
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { triagesDetail } from "@/api/screening-service/screening-details-service";
export default {
  name: "ScreeningDetails",
  components: {},
  data() {
    return {
      formInline: {},
      resource: "",
      filterNavItem: [
        { target: "basic", name: "基本信息" },
        { target: "BP", name: "血压/BP" },
        { target: "Glu", name: "血糖/Glu" },
        { target: "TC", name: "血脂/TC" },
        { target: "UA", name: "血尿酸/UA" },
        { target: "SpO2", name: "氧气/SpO2" },
        { target: "HbA1c", name: "糖化血红蛋白/HbA1c" },
        { target: "Hcy", name: "同型半胱氨酸/Hcy" },
        { target: "ECG", name: "心电图/ECG" },
        { target: "questionnaireCategory", name: "问卷类别" },
        { target: "dangerousLv", name: "危险等级" }
      ],
      filterNavItemActive: 0,
      isFixed: false,
      offsetTop: 0,
      id: ""
    };
  },
  computed: {},
  mounted() {
    this.id = this.$route.query.id;
    sessionStorage.setItem("sid", this.id);
    triagesDetail({ id: this.id }).then(res => {
      sessionStorage.setItem("ssex", res.sex);
      sessionStorage.setItem("sname", res.name);
      sessionStorage.setItem("sage", res.age);
    });
    /* window.addEventListener("scroll", this.initHeight);
    this.$nextTick(() => {
      this.offsetTop = document.querySelector("#boxFixed").offsetTop;
    }); */
  },
  methods: {
    returnIdAddress(id, index) {
      document.querySelector(id).scrollIntoView({
        behavior: "smooth"
      });
      this.filterNavItemActive = index;
    }
    /* initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > this.offsetTop ? true : false;
    } */
  }
};
</script>
<style lang="scss" scoped>
.shutiao {
  display: inline-block;
  width: 5px;
  height: 20px;
  border-radius: 28%;
  background-color: #4380ea;
  vertical-align: middle;
  margin-right: 6px;
}
.filter-nav {
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: space-between;
}
.filter-nav-item {
  list-style: none;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 15px 0px;
  border-right: 3px solid #f2f2f2;
  font-weight: bold;
}
.filter-nav :last-child {
  border-right: none;
}
.activeNav {
  color: #4380ea;
  font-weight: bold;
  border-bottom: 2px solid #4380ea;
}
.goBack {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  color: #4380ea;
  border-radius: 4px;
}
.back {
  font-size: 16px;
  margin-right: 10px;
}
.title_box {
  display: flex;
  align-items: center;
}
.title {
  font-family: "Arial Negreta", "Arial Negreta", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  color: #4380ea;
}
.longText >>> .el-form-item__label {
  width: 131px !important;
}
.hengfenge {
  width: 86%;
  height: 1px;
  background: #f2f2f2;
  margin: 0 auto;
  margin-bottom: 18px;
}
.hengfenge2 {
  width: 99%;
  height: 2px;
  background: #f2f2f2;
  margin: 0 auto;
  margin-bottom: 18px;
}
.biglongText >>> .el-form-item__label {
  width: 208px !important;
}
.six_word >>> .el-form-item__label {
  width: 96px !important;
}
</style>
